<script setup>
import axios from 'axios';

function getInfo() {
  axios.get("http://123.207.32.32:8000/home/multidata")
  .then(res => {
    console.log("res: ", res);
    // config: 请求配置
    // data: 响应数据
    // headers: 响应头
    // request: 请求对象
    // status: 响应状态码
    // statusText: 响应描述文本
    let data = res.data;
    console.log("data: ", data);
  })
  .catch(err => {
    console.log("err: ", err);
  });
}

function getInfoParams() {
  axios.get("http://123.207.32.32:8000/home/data", {
    params: {
      type: "sell",
      page: 1
    }
  })
  .then(res => {
    let data = res.data;
    console.log("data: ", data);
  })
  .catch(err => {
    console.log("err: ", err);
  });
}

function postInfo() {
  axios.post("http://123.207.32.32:8000/category")
  .then(res => {
    let data = res.data;
    console.log("data: ", data);
  })
  .catch(err => {
    console.log("err: ", err);
  });
}

function postInfoParams() {
  axios.post("http://123.207.32.32:8000/detail", {
    id: 100,
    username: "miranda",
    age: 18
  })
  .then(res => {
    let data = res.data;
    console.log("data: ", data);
  })
  .catch(err => {
    console.log("err: ", err);
  });
}

function getAll() {
  axios.all([
    axios({
      url: 'http://123.207.32.32:8000/home/multidata',
      method: 'get'
    }),
    axios({
      url: 'http://123.207.32.32:8000/home/data',
      method: 'get',
      params: {
        type: 'sell',
        page: 1
      }
    })
  ]).then(axios.spread((res1, res2) => {
    console.log("res1: ", res1);
    console.log("res2: ", res2);
  }));
}
</script>

<template>
<div>
  <button @click="getInfo">GET请求(无参)</button>
  <button @click="getInfoParams">GET请求(有参)</button>
  <button @click="postInfo">POST请求(无参)</button>
  <button @click="postInfoParams">POST请求(有参)</button>
  <button @click="getAll">并发请求</button>
</div>
</template>

<style scoped>

</style>